<template>
    <div class="alarmList">
        <div class="alarm-box-card">
            <el-form :inline="true" :model="formData" class="demo-form-inline" @submit.prevent label-width="83px">
                <el-form-item label="警报类型:" prop="alertType" class="maB16">
                    <el-select v-model="formData.alertType" placeholder="警报类型">
                        <el-option label="性能告警" value="1"></el-option>
                        <el-option label="错误告警" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="监测类型:" prop="monitorType" class="maB16">
                    <el-select v-model="formData.monitorType" placeholder="监测类型">
                        <el-option label="PING" value="1"></el-option>
                        <el-option label="TCP" value="2"></el-option>
                        <el-option label="HTTP" value="3"></el-option>
                        <el-option label="UDP" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="告警状态:" prop="status" class="maB16">
                    <el-select v-model="formData.status" placeholder="告警状态">
                        <el-option label="警报中" value="1"></el-option>
                        <el-option label="告警接触" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <br>
                <el-form-item label="时间段:" prop="time" class="maB0">
                    <el-date-picker v-model="formData.time" type="daterange" value-format="YYYY-MM-DD" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="快速检索" prop="name" class="maB0">
                    <el-input v-model="formData.name" placeholder="快速检索"></el-input>
                </el-form-item>
                <el-form-item label="告警级别:" prop="level" class="maB0">
                    <el-select v-model="formData.level" placeholder="告警级别">
                        <el-option label="普通告警" value="1"></el-option>
                        <el-option label="严重告警" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="alarm-box-card">
            <el-table :data="tableData" style="width: 100%" class="maB16">
                <el-table-column prop="date" label="告警名称"></el-table-column>
                <el-table-column prop="province" label="告警类型"></el-table-column>
                <el-table-column prop="city" label="任务名称"></el-table-column>
                <el-table-column prop="address" label="监测类型"></el-table-column>
                <el-table-column prop="zip" label="起始时间"></el-table-column>
                <el-table-column prop="zip" label="告警数量"></el-table-column>
                <el-table-column prop="zip" label="持续时长（分）"></el-table-column>
                <el-table-column prop="zip" label="告警级别"></el-table-column>
                <el-table-column prop="zip" label="结束时间"></el-table-column>
                <el-table-column prop="zip" label="警报状态"></el-table-column>
                <el-table-column prop="zip" label="操作"></el-table-column>
            </el-table>

            <el-pagination background layout="prev, pager, next" :total="1000">
            </el-pagination>
            <!-- <el-pagination :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
            </el-pagination> -->
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, reactive } from 'vue';
export default defineComponent({
    name: 'customizeAlert',
    components: {},
    setup() {
        let formData: Object = reactive({
            name: '',
            alertType: '',
            monitorType: '',
            status: '',
            level: '',
            time: null
        });
        const otherData: Object = reactive({
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }
            ],
            currentPage: 1
        });
        return {
            formData,
            ...toRefs(otherData)
        };
    }
});
</script>

<style lang="scss" scoped>
.alarmList {
    height: 100%;

    .alarm-box-card {
        padding: 10px 20px;
        background-color: white;
        border-radius: 4px;
    }
    .alarm-box-card + .alarm-box-card {
        margin-top: 10px;
    }
}
</style>
<style lang="scss">
.alarmList {
    .el-table__header th {
        background-color: #f5f7fa;
    }
    .el-select {
        width: 200px;
    }
    .el-range-editor {
        width: 296px;
    }
    .el-form-item__label {
        color: #606266;
    }
    .maB0 {
        margin-bottom: 0;
    }
    .maB16 {
        margin-bottom: 16px;
    }
}
</style>